<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto layout-padding-view">
			<div class="system-user-search mb15">
				<el-form :inline="true" :model="dataForm">
					<el-form-item label="用户名：">
							<el-input v-model="dataForm.name"></el-input>
					</el-form-item>
					<el-form-item><el-button size="default" type="primary" class="ml10" @click="onSearch()">查询</el-button></el-form-item>
				</el-form>	
			</div>
			<div class="system-user-content">
				<div class="leftpart">日志列表</div>
			</div>
			<el-table :data="tableData.data" v-loading="tableData.loading" style="width: 100%">
				<el-table-column prop="table" label="表名" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="updated_at" align="center" label="时间" sortable show-overflow-tooltip></el-table-column>
				<el-table-column prop="user.name" label="用户" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="path" align="center" label="地址" show-overflow-tooltip></el-table-column>
				<el-table-column prop="action" align="center" label="动作" show-overflow-tooltip></el-table-column>
				<el-table-column prop="desc" align="center" label="描述" show-overflow-tooltip></el-table-column>
				<el-table-column prop="ip" align="center" label="IP" show-overflow-tooltip></el-table-column>
				<el-table-column label="状态" align="center">
					<template #default="scope">
						<div>
							<el-link v-if="scope.row.status==1"   type="success">成功</el-link>
							<el-link v-if="scope.row.status==2" type="danger">失败</el-link>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<div>
							<el-link type="primary" @click="handleDetail(scope.row)">日志详情</el-link>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="display: flex; justify-content: flex-end;margin-right:30px">
				<el-pagination
				 style="margin-top:20px;"
				  background layout="prev, pager, next" 
				  :current-page="dataForm.page"
				  :page-size="dataForm.limit"
				  @current-change="handleCurrentChange"
				  :total="total" />
			</div>
		</div>
		<detailDrawer ref="detailDrawerRef" :rowObj="rowObj" ></detailDrawer>
	</div>
</template>

<script lang="ts" setup>
	import { defineAsyncComponent,ref,reactive,onMounted} from "vue"
	import {authorityApi} from "/@/api/system/authority/index"
	import { ElMessageBox, ElMessage } from 'element-plus';
	const detailDrawer = defineAsyncComponent(() => import('/@/views/system/logs/drawer.vue'));
	const authApi = authorityApi()
	const dataForm = ref({
		name:"",
		page:1,
		limit:10,
		orderby: "created_at:desc",
		include:"user"
	})
	const gid = ref(null)
	const loadingFlag = ref<Boolean>(false)
	const total =ref(0)
	const tableData = reactive({
		data:[],
		loading:false
	})
	const detailDrawerRef = ref(null)
	// 查询
	const handleCurrentChange = (val:number)=>{
		dataForm.value.page = val
		getTableList()
	}
	const onSearch = ()=>{
		dataForm.value.search = `user.name:${dataForm.value.name}:has_like`
		getTableList()
	}
	// 获取数据
	const getTableList = (async ()=>{
		tableData.loading = true
		let res = await authApi.getLogs(dataForm.value);
	
		if(res.isSuccess){
			tableData.data = res.returnData.data;
			total.value = res.returnData.total
			tableData.loading = false
		}
	})
	const rowObj = ref(null)
	const detailsFlag = ref<Boolean>(false)
	const handleDetail = (row:any)=>{
		rowObj.value = row;
		detailDrawerRef.value.openDrawer()
	}
	onMounted(()=>{
		getTableList()
	})
</script>

<style scoped lang="scss">
.system-role-container {
	.system-role-padding {
		padding: 15px;
		.el-table {
			flex: 1;
		}
	}
}
.leftpart{
	font-size: 18px;
}
.system-user-content{
	height: 60px;
	line-height: 60px;
	display: flex;
	justify-content: space-between;
}
.el-input{
	height: 40px;
}
.el-button{
	height: 40px;
}
</style>